import React, { useState } from 'react';
import { Modal, Spin } from 'antd';
import { useRequest, defaultFormatResult } from '@/hooks';
import { getEntryNotes } from '@/pages/EntryManage/services';
import GoogleMap from './component/GoogleMap';
import Map from './component/Map';
import styles from '../../index.less';

/**
 * 新员工入职引导 - 办理须知
 */
const StepNotice = ({ entryPersonnelData }) => {
    const [visible, setVisible] = useState(false);
    const { entryPersonnelCode, isChinaArea = true } = entryPersonnelData;
    const { organizationLocationVO } = entryPersonnelData;
    const { latitude, longitude } = organizationLocationVO || {};

    // 获取入职需知内容
    const { loading, data } = useRequest(() => getEntryNotes({ entryPersonnelCode }), {
        ...defaultFormatResult
    });

    const MapComponent = isChinaArea ? Map : GoogleMap;

    // const handleOpen = () => {
    //     setVisible(true);
    // };

    const handleCancel = () => {
        setVisible(false);
    };

    return (
        <Spin spinning={loading}>
            <div style={{ margin: '-24px', padding: '24px' }}>
                <div className={styles.textContent} dangerouslySetInnerHTML={{ __html: data }} />
            </div>
            <Modal
                title="公司地址"
                visible={visible}
                width="800px"
                destroyOnClose
                centered
                footer={null}
                onCancel={handleCancel}
            >
                <div style={{ width: '100%', height: '400px' }}>
                    <MapComponent
                        onSelect={() => {}}
                        onChange={() => {}}
                        defaultPosition={{ latitude, longitude }}
                        visible={visible}
                    />
                </div>
            </Modal>
        </Spin>
    );
};

export default StepNotice;
